<template>
  <div id="background">
  </div>
  <div class="centered-container">
      <a-form
      name="normal_login"
      class="login-wrapper"
    >
      <a-form-item
        label="用户名"
        name="username"
      >
        <a-input v-model:value="username" style="width: 200px;">
        </a-input>
      </a-form-item>
  
      <a-form-item
        label="密码"
        name="password"
      >
        <a-input-password v-model:value="password" style="width: 215px;">
        </a-input-password>
      </a-form-item>

      <a-form-item
      label="确认密码"
      name="checkPassword"
    >
      <a-input-password v-model:value="checkPassword" style="width: 186px;">
      </a-input-password>
    </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" style="margin-left:10px;" @click="userRegister">
          确定
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import axios from '../config/axios'
import {useRouter} from 'vue-router'
import { message } from 'ant-design-vue';


const router = useRouter()

const username = ref();
const password = ref();
const checkPassword = ref();

const userRegister = async()=>{

  const res = await axios.post('/user/register',{
    checkPassword: checkPassword.value,
    userAccount:username.value ,
    userPassword: password.value
  })
  console.log(res.data );
  if(res.data.code===0){
    message.success("注册成功")
    router.push("/userLogin")
  }else{
    message.error(res.data.message);
  }
}

</script>
<style>
  .centered-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #background {
    background: url("G:\steam\steamapps\workshop\content\431960\2859009781\preview.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: '100%,100%';
    position: fixed;
  }
  .login-wrapper {
  /* 样式设置可以根据你的需求进行调整 */
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
  </style>

